<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Examples</title>
    <link rel="stylesheet" href="ext-4.2.1.883/resources/css/ext-all.css">
    <script type="text/javascript" src="ext-4.2.1.883/ext-all.js"></script>
    <script type="text/javascript" src="ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<script>

    Ext.define('KitchenSink.view.tree.BasicTrees', {
        extend: 'Ext.Container',
        xtype: 'basic-trees',
        width: 640,

        layout: {
            type: 'table',
            columns: 2,
            tdAttrs: { style: 'padding: 10px;' }
        },

        defaults: {
            xtype: 'treepanel',
            width: 300,
            height: 200,
            rootVisible: false,
            // Sharing the store synchronizes the views:
            store: 'myStore'
        },

        initComponent: function() {
            this.items = [
                {
                    title: 'Tree'
                },
                {
                    title: 'Tree with No Lines',
                    lines: false
                },
                {
                    title: 'Tree with Arrows',
                    useArrows: true,
                    colspan: 2
                }
            ];

            this.callParent();
        }
    });

    var myStore = Ext.create('Ext.data.TreeStore', {
        fields: [
            'folderName','pid','id'
        ],
        clearOnLoad:true,
        proxy: {
            type: 'ajax',
            url: 'http://localhost:8080/folder/getList.do',
            actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"},
            reader: {
                type: 'json',
                root: 'data'
            },
            extraParams: {
                pid: '2'
            }
        },
        nodeParam: 'pid',
        root: {
            id:'root',
            expanded:true
        },
        autoLoad: true,
    });

    Ext.onReady(function () {
        var viewport = Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            autoScroll: false
        });

        var grid = Ext.create('KitchenSink.view.tree.BasicTrees', {});
        viewport.add(grid);
    });
</script>
</body>
</html>